<template>
    <div>
        <a-card class="box-card" :style="{ marginTop: '15px' }" :cardOpen="true">
            <div slot="header">
                <span>处置流程</span>
            </div>
            <el-form ref="elForm" size="medium" label-width="100px">
                <el-row class="role-groups">
                    <div class="role-group-side">
                        <el-tree :data="plan.nodeList" ref="flowNodeList" node-key="nodeId" default-expand-all check-on-click-node highlight-current @node-click="onFlowNodeClick">
                            <span class="flow-node" slot-scope="{ node, data }">
                                <span class="flow-label">{{ data.nodeName }}</span>
                            </span>
                        </el-tree>
                    </div>
                    <div class="role-list">
                        <el-form-item label="处置任务" prop="event_name">
                            <handle-task-table ref="handleTaskTable" :tasks="nodeTasks" :handleId="handleId" @refreshCurrentTasks="queryCurrentNodeTasks" :handleing="handleing" />
                        </el-form-item>
                    </div>
                </el-row>
            </el-form>
        </a-card>
    </div>
</template>

<script>
import * as HandleApi from "@/api/response/handle.js";
import ACard from "@/views/components/a-card/card.vue";
import HandleTaskTable from "../module/HandleTaskTable.vue";
import { selectDeptTaskByNodeId, addDeptTask } from "@/api/response/task";
export default {
    name: "HandleDetailCard",
    components: { ACard, HandleTaskTable },
    dicts: ["sys_dept_type_dict"],
    props: {
        handleId: {
            type: Number,
            default: 0,
        },
        plan: {
            type: Object,
            default: () => {
                return {};
            },
        },
        handleing: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            handleInfo: {},
            levels: [],
            responseLevelOption: [
                {
                    label: "Ⅰ级响应",
                    value: 1,
                },
                {
                    label: "Ⅱ级响应",
                    value: 2,
                },
                {
                    label: "Ⅲ级响应",
                    value: 3,
                },
                {
                    label: "Ⅳ级响应",
                    value: 4,
                },
            ],
            activeResponse: "1",
            currentLevel: null,
            currentFlow: null,
            drillPlanId: 0,
            nodeTasks: [],
            nodes: [],
            currentNodeId: "",
            timer: null,
        };
    },
    mounted() {
        // 预案数据更新后默认初始化第一个处置流程
        this.$refs.flowNodeList.setCurrentKey(this.plan.nodeList[0].nodeId);
        this.onFlowNodeClick(this.plan.nodeList[0]);
        this.getNodeProgress();
        this.$bus.$on("handle-detail-destroy", () => {
            if (this.timer) {
                clearInterval(this.timer);
            }
        });
    },
    methods: {
        getNodeProgress() {
            HandleApi.getHandleProgress(this.handleId).then(res => {
                this.nodes = res.data;
            });
        },
        onFlowNodeClick(val) {
            this.currentNodeId = val.nodeId;
            // 根据节点ID获取任务列表
            this.queryCurrentNodeTasks();
        },
        queryCurrentNodeTasks() {
            selectDeptTaskByNodeId({
                handleId: this.handleId,
                nodeId: this.currentNodeId,
            }).then(res => {
                this.nodeTasks = res.data;
                if (this.timer == null) {
                    this.timer = setInterval(() => {
                        this.queryCurrentNodeTasks();
                    }, 5000);
                }
            });
        },
        setCurrentTasks(data) {
            this.currentFlow.hdTasks = data;
        },
    },
};
</script>

<style lang="scss" scoped>
.role-groups {
    display: flex;

    .role-group-side {
        min-width: 200px;
    }

    .role-list {
        flex: 1;
        margin-left: 15px;
        box-sizing: content-box;
        overflow: hidden;
    }
}

::v-deep {
    .el-tree-node__content {
        display: flex;

        .flow-node {
            flex: 1;
            display: flex;

            .flow-label {
                flex: 1;
                line-height: 28px;
            }

            .flow-btns {
                margin-right: 10px;
            }
        }
    }

    .el-button.tab-edit-btn {
        color: #13ce66;
        margin-left: 10px;
        font-size: 12px;
    }
}

.feed-container {
    background: #0b133c;
    color: white;
    border-radius: 10px;
    padding: 15px;

    .feed-list {
        overflow-y: scroll;
        max-height: 300px;

        // 设置滚动条宽度
        &::-webkit-scrollbar {
            width: 8px !important;
            height: 8px !important;
            background: rgba(10, 122, 227, 0.01);
        }

        //滚动条的哈滑块
        &::-webkit-scrollbar-thumb {
            background: #2e6190;
            border-radius: 3px;
        }

        .feed-item {
            font-size: 12px;
            line-height: 25px;
        }
    }
}

ul,
li {
    padding: 0;
    margin: 0;
}

li {
    list-style: none;
}

.drill-btns {
    text-align: center;
    margin-top: 20px;
}
</style>
